<template >
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/"> 首页 </XtxBreadItem>
        <XtxBreadItem :to="`/category/${CategoryFilterObj.parentId}`">{{
          CategoryFilterObj.parentName
        }}</XtxBreadItem>
        <XtxBreadItem> {{ CategoryFilterObj.name }} </XtxBreadItem>
      </XtxBread>
      <!-- 筛选区 -->
      <SubFilter />
      <!-- 排序区域 -->
      <SubSort />
      <!-- 列表区域 -->
      <SubList />
    </div>
  </div>
</template >

<script>
import { findSubCategoryFilter } from '@/api/category'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import SubSort from './sub-sort.vue'
import SubFilter from './sub-filter.vue'
import SubList from './sub-list.vue'
export default ({
  name: 'SubCategory',
  components: {
    SubSort, SubFilter, SubList
  },
  setup () {
    const route = useRoute()
    const CategoryFilterObj = ref({})
    async function getCategoryFilter () {
      const { result } = await findSubCategoryFilter(route.params.id)
      // console.log('er', result)
      CategoryFilterObj.value = result
    }
    onMounted(() => {
      // console.log(route.params)
      getCategoryFilter()
    })
    return { CategoryFilterObj }
  }
})
</script>

<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
